<template>
	<view class="i-icon">
		<view class="flex-center-center">
			<text class="iconfont"
			 :class="_name"
			 :style="{
				color: _color,
				
			 }"
			 ></text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, toRefs } from 'vue';

	interface Props{
		name: string,
		color?: string,
		fontSize?: number,
		unit?: string,
		spin?: boolean,
		rotate?: boolean,
		rotateDeg?: number
	}
	const props = withDefaults(defineProps<Props>(),{
		// name: "",
		color: "",
		fontSize: 32,
		unit: "rpx",
		spin: false,
		rotate: false,
		rotateDeg: 0,
	})
	
	const { color, fontSize, spin, rotateDeg, rotate, name } = toRefs(props)
	const { unit } = props
	
	const _name = computed(()=>{
		return 'icon-' + name.value
	})
	// icon颜色 
	const _color = computed(()=>{
		return color.value || "#00000080"
	})
	// icon文字大小
	const _fontSize = computed(()=>{
		if(uni.$is.isNumber(fontSize.value)){
			return fontSize.value + unit
		}else{
			return 32 + unit
		}
	})
	// 旋转角度
	const _rotateDeg = computed(()=>{
		if(spin.value){
			return '90deg'
		}else{
			if(rotate.value){
				if(uni.$is.isNumber(rotateDeg.value)){
					return rotateDeg.value + 'deg'
				}else{
					return '0deg'
				}
			}else{
				return '0deg'
			}
		}
	})
	
</script>

<style lang="scss" scoped>
.i-icon{
	
}
</style>